/* eslint-disable no-undef */
/* eslint-disable no-undef */
/* eslint-disable no-undef */
/* eslint-disable no-unreachable */
/* eslint-disable no-unreachable */
<template>
<div class="map-box" id="container">
      <!-- 图例 -->
      <Legend/>
      <!-- 地图上的标签 放大缩小-->
      <Tag/>
      <!-- 地图渲染形式 -->
      <LayerBox/>
</div>
</template>

<script>
import mapU from "@/utils/mapUtils";
import Legend from '@/components/Map/Legend'
import Tag from '@/components/Map/Tag'
import LayerBox from '@/components/Map/LayerBox'
export default {
  name: "mapBox",
  components:{
    Tag,
    Legend,
    LayerBox,
  },
  data() {
    return {
      map: {},
      boundaryLayer: {},
      heatlayer: {},
      polygonColors: {},
      ODLayer: {},
      clusterLayer: {},
      imageLayer: {},
      traceData: {},
      scatterLayer: [],
      // 后期删除
      boundaryGroup:{}
    };
  },
  computed: {
    // 当前地图数据
    curMapData() {
      return this.$store.getters["map/curMapData"];
    },
    // 当前地图类型
    curMapType() {
      return this.$store.getters["map/curMapType"];
    },
    // 当前边界数据
    curBoundaryData() {
      return this.$store.getters["map/curBoundaryData"];
    },
    apiUrl(){
      return this.$store.getters.apiUrl
    }
  },
  watch: {
    // 监听边界数据变化，并渲染
    curBoundaryData(val) {
      const geojson = mapU.addPolygonLayer(val)
      this.boundaryGroup.clearOverlays()
      this.boundaryGroup.addOverlays(geojson)


      // if(this.polygonColors){
      //   this.map.remove(this.polygonColors)
      // }

      
      // this.polygonColors = geojson

      // this.polygonColors = mapU.addPolygonLayer(
      //   this.map,
      //   val,
      //   this.polygonColors
      // );
      // this.polygonColors = mapU.addPolygonLayer(this.map, val, this.polygonColors)
    },
    // 监听请求数据地址变化，说明菜单选择有变化，重绘地图
    apiUrl(){
      mapU.reDrawMap(
        this.map,
        this.heatlayer,
        this.polygonColors,
        this.clusterLayer
      );
    },
    // 监听地图数据更新，并渲染
    curMapData: {
      handler(val) {
        this.renderMapData(this.map, val, this.curMapType);
      },
      deep: true
    },
    // 监听地图类型变化时 渲染
    curMapType:{
      handler(val) {
        this.renderMapData(this.map, val, this.curMapType);
      },
      deep: true
    }
  },
  mounted() {
    // 地图初始化
    this.map = mapU.initMap({zoomLev: 11,centerPt: [116.867428, 39.79]});
    
    // 暂时（后期删除）
    this.boundaryGroup = new AMap.OverlayGroup()
    this.map.add(this.boundaryGroup)
  },
  methods: {
    renderMapData(map, mapData, mapType) {
      // console.log(mapType)
      switch(mapType[0]){
        case 'o':
        case 'd':
          if(mapType[1] == 'join'){
            mapU.reDrawMap(
              this.map,
              this.heatlayer,
              this.polygonColors,
              this.clusterLayer,
              this.imageLayer,
              this.scatterLayer
            );
            this.clusterLayer = mapU.addMarkCluster(map, mapData);
          }else if(mapType[1] == 'hot'){
            mapU.reDrawMap(
              this.map,
              this.heatlayer,
              this.polygonColors,
              this.clusterLayer,
              this.imageLayer,
              this.scatterLayer
            );
            this.heatlayer = mapU.addHeatMap(map, mapData);
          }else if(mapType[1] == 'polygon'){
            mapU.reDrawMap(
                this.map,
                this.heatlayer,
                this.polygonColors,
                this.clusterLayer,
                this.imageLayer,
                this.scatterLayer
              );
            this.polygonColors = mapU.addColorPolygon(map, mapData);
          }else if(mapType[1] =='raster') {
            mapU.reDrawMap(
              this.map,
              this.heatlayer,
              this.polygonColors,
              this.clusterLayer,
              this.imageLayer,
              this.scatterLayer
            );
            this.imageLayer = mapU.addRaster(map, mapData.url, mapData.bounds);
          }else if(mapType[1] =='scatter') {
            mapU.reDrawMap(
                this.map,
                this.heatlayer,
                this.polygonColors,
                this.clusterLayer,
                this.imageLayer,
                this.scatterLayer
            );
            this.scatterLayer = mapU.addScatterMarker(map, mapData);
          }
          break;
        case 'od':
          mapU.reDrawMap(
              this.map,
              this.heatlayer,
              this.polygonColors,
              this.clusterLayer,
              this.imageLayer,
              this.scatterLayer
            );
          this.ODLayer = mapU.addODLayer(map, mapData);
          break;
        case 'track':
          mapU.reDrawMap(
              this.map,
              this.heatlayer,
              this.polygonColors,
              this.clusterLayer,
              this.imageLayer,
              this.scatterLayer
            );
          mapU.addPlayMap2(map, mapData);
      }

      // if(mapType[0] == 'join'){
      //     mapU.reDrawMap(
      //       this.map,
      //       this.heatlayer,
      //       this.polygonColors,
      //       this.clusterLayer
      //     );
      //     this.clusterLayer = mapU.addMarkCluster(map, mapData);
      // }else if(mapType[0] == 'hot'){
      //   mapU.reDrawMap(
      //     this.map,
      //     this.heatlayer,
      //     this.polygonColors,
      //     this.clusterLayer
      //   );
      //   this.heatlayer = mapU.addHeatMap(map, mapData);
      // }else if(mapType[0] == 'polygon'){
      //   mapU.reDrawMap(
      //       this.map,
      //       this.heatlayer,
      //       this.polygonColors,
      //       this.clusterLayer
      //     );
      //   this.polygonColors = mapU.addColorPolygon(map, mapData);
      // }

      return false
        // eslint-disable-next-line no-unreachable
        // switch (mapType.slice(0, 2).join("_")) {
        //   // 点-聚合
        //   case "point_join":
        //     mapU.reDrawMap(
        //     this.map,
        //     this.heatlayer,
        //     this.polygonColors,
        //     this.clusterLayer
        //   );
        //     this.clusterLayer = mapU.addMarkCluster(map, mapData);
        //     break;
        //   // 点-热力
        //   case "point_hot":
        //     mapU.reDrawMap(
        //       this.map,
        //       this.heatlayer,
        //       this.polygonColors,
        //       this.clusterLayer
        //     );
        //     this.heatlayer = mapU.addHeatMap(map, mapData);
        //     break;
        //   // 线-od
        //   case "line_od":
        //     mapU.reDrawMap(
        //         this.map,
        //         this.heatlayer,
        //         this.polygonColors,
        //         this.clusterLayer
        //       );
        //     mapU.addODLayer(map, mapData);
        //     break;
        //   // 线-轨迹
        //   case "line_track":
        //     mapU.reDrawMap(
        //         this.map,
        //         this.heatlayer,
        //         this.polygonColors,
        //         this.clusterLayer
        //       );
        //     mapU.addPlayMap2(map, mapData);
        //     break;
        //   // 面-o
        //   case "polygon":
        //   case "polygon_polygon_o":
        //   case "polygon_polygon_d":
        //     mapU.reDrawMap(
        //         this.map,
        //         this.heatlayer,
        //         this.polygonColors,
        //         this.clusterLayer
        //       );
        //     this.polygonColors = mapU.addColorPolygon(map, mapData);
        //     break;
        // }
    },
    addPlayMap(map) {
      var marker,
        lineArr = [
          [116.478935, 39.997761],
          [116.478939, 39.997825],
          [116.478912, 39.998549],
          [116.478912, 39.998549],
          [116.478998, 39.998555],
          [116.478998, 39.998555],
          [116.479282, 39.99856],
          [116.479658, 39.998528],
          [116.480151, 39.998453],
          [116.480784, 39.998302],
          [116.480784, 39.998302],
          [116.481149, 39.998184],
          [116.481573, 39.997997],
          [116.481863, 39.997846],
          [116.482072, 39.997718],
          [116.482362, 39.997718],
          [116.483633, 39.998935],
          [116.48367, 39.998968],
          [116.484648, 39.999861]
        ];
      // eslint-disable-next-line no-undef
      marker = new AMap.Marker({
        map: map,
        position: [116.478935, 39.997761],
        icon: "https://webapi.amap.com/images/car.png",
        // eslint-disable-next-line no-undef
        offset: new AMap.Pixel(-26, -13),
        autoRotation: true,
        angle: -90
      });

      // 绘制轨迹
      let polyline = new AMap.Polyline({
        map: map,
        path: lineArr,
        showDir: true,
        strokeColor: "#28F", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });

      var passedPolyline = new AMap.Polyline({
        map: map,
        // path: lineArr,
        strokeColor: "#AF5", //线颜色
        // strokeOpacity: 1,     //线透明度
        strokeWeight: 6 //线宽
        // strokeStyle: "solid"  //线样式
      });

      marker.on("moving", function(e) {
        passedPolyline.setPath(e.passedPath);
      });

      map.setFitView();
      marker.moveAlong(lineArr, 200);
    },
    addPlayMap2(map, traceData) {
      if (this.clusterLayer) {
        map.remove(this.clusterLayer);
      }
      if (this.heatlayer) {
        map.remove(this.heatlayer);
      }
      if (this.polygonColors) {
        map.remove(this.polygonColors);
      }
      //使用巡航器的方式加入轨迹
      const _this = this;
      var pathSimplifierIns;
      AMapUI.load(["ui/misc/PathSimplifier", "lib/$"], function(
        PathSimplifier,
        $
      ) {
        pathSimplifierIns = new PathSimplifier({
          zIndex: 100,
          autoSetFitView: false,
          map: map,
          getPath: function(pathData, pathIndex) {
            return pathData.path;
          },
          getHoverTitle: function(pathData, pathIndex, pointIndex) {
            return null;
          },
          renderOptions: {
            pathLineStyle: {
              dirArrowStyle: true
            },
            getPathStyle: function(pathItem, zoom) {
              var color = "#ff9900",
                lineWidth = 1;

              return {
                pathLineStyle: {
                  strokeStyle: color,
                  lineWidth: lineWidth
                },
                pathLineSelectedStyle: {
                  lineWidth: lineWidth
                },
                pathNavigatorStyle: {
                  fillStyle: color
                }
              };
            }
          }
        });

        _this.ODLayer = pathSimplifierIns;

        // var flyRoutes = [{
        //   name:'测试',
        //   path:
        //   traceData
        //     }];
        var flyRoutes = [];
        for (var i = 0; i < traceData.features.length; i++) {
          flyRoutes.push({
            name: "测试" + (i + 1),
            path: traceData.features[i].geometry.coordinates
          });
        }
        _this.ODLayer.setData(flyRoutes);
        //点击事件
        _this.ODLayer.on("pathClick pointClick", function(e, info) {
          console.log(_this.$store.state.clickMapODID);
          _this.$store.commit("changeMapClickODID", info.pathData.ID);
          console.log(_this.$store.state.clickMapODID);
        });

        var styleNvg = {
          loop: true,
          speed: 6000,
          pathNavigatorStyle: {
            width: 1,
            height: 2,
            //使用图片
            content: PathSimplifier.Render.Canvas.getImageContent(
              "../assets/circle.png",
              onload,
              onerror
            ),
            strokeStyle: null,
            fillStyle: null,
            //经过路径的样式
            pathLinePassedStyle: {
              lineWidth: 2,
              strokeStyle: "red",
              dirArrowStyle: {
                stepSpace: 0.5,
                strokeStyle: "red"
              }
            }
          }
        };

        var navg = _this.ODLayer.createPathNavigator(0, styleNvg);
        navg.start();
      });
    },
    changeClickName(clickName) {
      this.$store.commit("changeMapClickPolyName", clickName);
      console.log(this.$store.state.clickMapPolygonName);
    }
  }
}
</script>

<style lang="stylus" scoped>
@import "../../assets/style/amap.styl"
.map-box 
  height 100%
  width 100%

  /deep/ .amap-maps
      .amap-drags
        .amap-overlays
          .amap-info
            >div
              bottom 10px!important
          
  /deep/ .amap-maps
      .amap-drags
        .amap-overlays
          .amap-info
            >div
              >div
                background linear-gradient(to right, rgba(62,73,103,0.7), #303a58)
                padding 5px 10px!important
                border-radius 3px!important

</style>
